<script setup>
import { getSrc, getLogin } from '@/api/api'
import { onMounted, ref } from 'vue'
import { useTokenStore } from '@/stores'
import { useRouter } from 'vue-router'
let date = new Date()
const router = useRouter()
const currentTime = ref('')
const TokenStore = useTokenStore()
const generateRandomString = () => {
 const characters =
  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
 const charactersLength = characters.length
 const randomLength = Math.floor(Math.random() * 4) + 5 // 生成一个5到8之间的随机整数
 let result = ''

 for (let i = 0; i < randomLength; i++) {
  result += characters.charAt(Math.floor(Math.random() * charactersLength))
 }

 return result
}
onMounted(async () => {
 currentTime.value = date.getTime()
 const data = {
  RanDom: generateRandomString(),
  Time: currentTime.value
 }

 const getqr = await getSrc(data)
 src.value = getqr.msg
 let T = setInterval(() => {
  getLogin(data).then((res) => {
   if (res.code == 200) {
    clearInterval(T)
    TokenStore.setAccessToken(res.data.access_token)
    TokenStore.setRefreshToken(res.data.refresh_token)
    router.push('/manger')
   }
  })
 }, 2000)
})
const src = ref('')
</script>
<template>
 <video
  id="video-background"
  class="video-js vjs-fill vjs-fluid"
  muted
  autoplay
  loop
 >
  <source
   src="../../assets/视频素材-梦幻粒子星光素材视频.mp4"
   type="video/mp4"
  />
 </video>
 <div style="z-index: 100">
  <h2 style="z-index: 200">欢迎登录活动管理平台</h2>
  <div class="card">
   <img :src="src" alt="" srcset="" />
  </div>
 </div>
</template>

<style scoped>
#video-background {
 z-index: 0;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

h2 {
 position: relative;
 margin: 0 auto;
 color: aqua;
 margin-top: 7rem;
 font-size: 35px;
 width: 100%;
 text-align: center;
}

.card {
 margin: 2rem auto;
 position: relative;
 width: 400px;
 height: 400px;
 background-color: #000;
 display: flex;
 flex-direction: column;
 justify-content: end;
 padding: 12px;
 gap: 12px;
 border-radius: 8px;
 cursor: pointer;
}

.card::before {
 content: '';
 position: absolute;
 inset: 0;
 left: -5px;
 margin: auto;
 width: 200px;
 height: 264px;
 border-radius: 10px;
 background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%);
 z-index: -10;
 pointer-events: none;
 transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card::after {
 content: '';
 z-index: -1;
 position: absolute;
 inset: 0;
 background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100%);
 transform: translate3d(0, 0, 0) scale(0.95);
 filter: blur(20px);
}

.heading {
 font-size: 20px;
 text-transform: capitalize;
 font-weight: 700;
}

.card p:not(.heading) {
 font-size: 14px;
}

.card p:last-child {
 color: #e81cff;
 font-weight: 600;
}

.card:hover::after {
 filter: blur(30px);
}

.card:hover::before {
 transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);
}
</style>
